<template>
  <div class="vue-quill-editor">
    <quill-editor ref="mwQuillEditor" v-model="html" :options="editorOption" />
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 工具栏
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  ['link', 'image'] // 链接、图片、视频-----['link', 'image', 'video']
]
export default {
  name: 'VueQuillEditor',
  components: {
    quillEditor
  },
  props: {
    value: {
      type: [Number, Object, Array, String],
      default: ''
    }
  },
  data() {
    return {
      html: this.value,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: this.handleImgUpload
            }
          }
        }
      },
      isShow: false
    }
  },
  watch: {
    html: {
      handler(newValue) {
        this.$emit('input', newValue)
      },
      deep: true
    },
    value: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) this.html = newValue
      },
      deep: true
    }
  },
  mounted() {
    this.initMounted()
  },
  methods: {
    initMounted() {
      setTimeout(() => {
        this.isShow = true
      }, 100)
    },
    handleImgUpload() {
      const { quill } = this.$refs.mwQuillEditor
      console.log(quill)
    }
  }
}
</script>
<style lang="scss">
.vue-quill-editor {
  width: 530px;
  height: 220px;
  .quill-editor {
    line-height: normal;
    .ql-container.ql-snow {
      line-height: normal !important;
      height: 550px !important;
      font-size: 14px;
    }
    .ql-snow {
      .ql-tooltip[data-mode='link']::before {
        content: '请输入链接地址:';
      }
      .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: '保存';
        padding-right: 0px;
      }
      .ql-tooltip[data-mode='video']::before {
        content: '请输入视频地址:';
      }

      .ql-picker.ql-header {
        .ql-picker-label::before,
        .ql-picker-item::before {
          content: '文本';
        }
      }
    }
  }
}
</style>
